<template>
    <Card>
        <div>
            <Row :gutter="8" class="ivu-mb-8">
                <Col>
                <Input v-model="params.keywords" placeholder="请输入配置词语或词性" @on-enter="changetype"></Input>
            </Col>
                <Col>
                <Button type="primary" @click="changeAdd('add',{id:''})"  v-hasC="{
                    name: 'v1-search-setting-update-cixing',
                    flag: 'v1/search/setting/update-cixing',
                }">新增</Button>
            </Col>
            </Row>
            <Table border :columns="columns" :data="data" max-height="600">
                <template slot="keyword" slot-scope="{row}">
                    <a @click="clickkeyword(row)">{{row.keywords_num}}</a>
                </template>
                <template slot="option" slot-scope="{row}">
                    <a type="primary" @click="changeAdd('edit',row)"
                       v-hasC="{
                           name: 'v1-search-setting-update-cixing2',
                           flag: 'v1/search/setting/update-cixing',
                    }">编辑</a>
                    <Divider type="vertical" 
                             v-hasC="
                         
                                 {
                                     name: 'v1-search-setting-delete-cixing',
                                     flag: 'v1/search/setting/delete-cixing',
                                 }
                             "
                    ></Divider>
                    <a style="color:#ed4014"  @click="deleteTag(row)"  v-hasC="{
                        name: 'v1-search-setting-delete-cixing',
                        flag: 'v1/search/setting/delete-cixing',
                    }">删除</a>
                </template>

            </Table>
            <Modal v-model="modalStatus" :title="modalTitle" width="600" @on-cancel="handleReset(formValidate)">
                <Form ref="formValidate" :model="formData" :rules="ruleValidate" label-position="left" :label-width="100">
                    <FormItem label="词性大类:" prop="name">
                        <Input placeholder="请输入词性大类名称" v-model="formData.name" v-width="200"></Input>
                        <InputNumber class="ivu-ml-16" :min="1" v-model="formData.sort" ></InputNumber>
                    </FormItem>
                    <FormItem label="词语配置:" prop="keyword">
                        <Input type="textarea"  v-model="formData.keyword" :autosize=" { minRows: 2, maxRows: 6 }" placeholder="请输入词语，一行一个"></Input>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button @click="handleReset(formValidate)">取消</Button>
                    <Button type="primary" :loading="formloading" @click="handleSubmit(formValidate)">确定</Button>
                </div>
            </Modal>
            <Modal v-model="modalkey" footer-hide>
                <Input type="textarea" v-model="remark" :autosize=" { minRows: 9, maxRows: 40 }" placeholder="请输入词语，一行一个"></Input>
            </Modal>
        </div>
    </Card>
</template>
<script>
    import { addMatching,cixingList,updateCixing,deleteCixing } from '@/api/hqapi';
    export default {
        data(){
            return {
                formValidate: 'formValidate',
                params: {keywords: ''},
                columns: [
                    {
                        title: '名称',
                        align: 'center',
                        key: 'name',
                        minWidth: 100,

                    },
                    {
                        title: '排序',
                        align: 'center',
                        key: 'sort',
                        minWidth: 100,
                    },
                    {
                        title: '词语总数',
                        align: 'center',
                        slot: 'keyword',
                        minWidth: 100,

                    },
                    {
                        title: '操作',
                        align: 'center',
                        slot: 'option',
                        minWidth: 100,

                    },
                ],
                data: [],
                modalStatus: false,
                formData: {
                    name: '',
                    keyword: '',
                    sort: 1,
                },
                ruleValidate: {
                    name: [{required: true, message: '请输入词性名称', trigger: 'blur'}],
                    keyword: [ { required: true, message: '请输入词语，一行一个', trigger: 'blur' }]
                },
                formloading: false,
                modalTitle: '',
                index: 1,
                num: 0,
                modalkey: false,
                remark: '',
            };
        },
        methods: {
            // textareaBlur() {
            //     let arr = [];
            //     let keyword = this.formData.keyword.toLowerCase();
            //     arr = keyword.split('\n');
            //     const domain = arr.map(item => {
            //         return item.replace(/https?:\/\//gi, '').replace(/\/.*$/gi, '');
            //     });
            //     this.formData.keyword = domain.join('\n');
            // },
            validateconsume(rule, value, callback) {
                if(value === '') {
                    callback(new Error('排序'));
                }else {
                    // console.log(value ,'qqq')
                    if(!Number.isInteger(value)) {
                        callback(new Error('请输入整数'));
                    }
                    callback();
                }
            },
            changetype(){
                this.initial(); 
            },
            initial(){
                this._searchList();
            },
            // 获取列表
            _searchList(){
                cixingList({keywords: this.params.keywords}).then(res => {
                    this.data = res;
                });
            },
            changeAdd(e, row) {
                this.modalStatus = true;
                if(e == 'add') {
                    this.modalTitle = '新增';
                }else {
                    this.modalTitle = '编辑';
                   
                    this.formData = {
                        name: row.name,
                        keyword: row.keywords,
                        sort: row.sort * 1
                    };
                    this.$set(this.formData,'id',row.id);
                }
            },
            handleReset(name){
                this.$refs[name].resetFields();
                this.formData.sort = 1;
                this.modalStatus = false;
            },
            handleSubmit(name){
                this.$refs[name].validate(valid => {
                    if(valid) {
                        this.formloading = true;
                        // const other_domain = this.formData.keyword.split('\n');
                        // this.formData.keyword = other_domain.join(',').replace(/ /g, '');
                        if(this.modalTitle === '新增'){
                            const params = {
                                id: '',
                                name: this.formData.name,
                                keywords: this.formData.keyword,
                                sort: this.formData.sort
                            };
                            updateCixing(params).then(res => {
                                this.$Message.success('新增成功');
                                this.formloading = false;
                                this.handleReset(name);
                                this.initial();
                            }).catch(() => {
                                this.formloading = false;
                            });
                        }else {
                            const params = {
                                id: this.formData.id,
                                name: this.formData.name,
                                keywords: this.formData.keyword,
                                sort: this.formData.sort
                            };
                            updateCixing(params).then(res => {
                                this.$Message.success('编辑成功');
                                this.formloading = false;
                                this.handleReset(name);
                                this.initial();
                            }).catch(() => {
                                this.formloading = false;
                            });
                        }
                        
                    }
                });
            },
            /* 删除 */
            deleteTag(row) {
                this.$Modal.confirm({
                    title: '删除确认',
                    content:
                        '删除后该词性下的搜索词都会被清除，不可恢复',
                    loading: true,
                    onOk: () => {
                        deleteCixing({ id: row.id }).then(res => {
                            this.$Modal.remove();
                            this.$Message.success('删除成功');
                            this.initial();
                        });
                    }
                });
            },
            clickkeyword(row){
                // .join('\n');
                this.remark = row.keywords;
                this.modalkey = true;
            }
        }
    };
</script>